<template>
    <div class="bookmarks-list-wrap">
        <ul class="bookmarks-list" :class="[store.theme,!bookmarksList.length && 'empty']">
            <li v-for="item of bookmarksList" :key="item.url" class="bookmarks-item" @mouseenter="mouseenter(item)"
                @mouseleave="mouseleave(item)" @click="openBookmark(item)">
                <div v-if="isDeletable && item.hover" class="delete-wrap" @click.stop="() => {}">
                    <div class="icon-item">
                        <el-icon size="100px" color="#efefef" @click.stop="removeBookmark(item.url)">
                            <CircleCloseFilled />
                        </el-icon>
                    </div>
                    <div v-if="isClear" class="icon-item">
                        <el-icon size="100px" color="#efefef" @click.stop="addBookmark(item.url)">
                            <CirclePlusFilled />
                        </el-icon>
                    </div>
                </div>
                <p class="bookmark-img">
                    <el-image style="width: 192px; height: 108px" :src="item.screenshot" />
                </p>
                <p class="bookmark-title">{{item.title}}</p>
                <p class="bookmark-url">{{item.url}}</p>
                <p v-show="(item.hover || item.favorite) && !isDeletable && (filterType || !item.isDelete)"
                    class="bookmark-star" @click.stop="updateFavorite(item.url)">
                    <img :src="`assets/${item.favorite ? 'star-fill' : 'star'}.svg`" alt="">
                </p>
            </li>
            <div v-show="!bookmarksList.length" class="search-empty">
                <el-empty image="assets/empty-box.svg">
                    <template #description>
                        <slot></slot>
                    </template>
                </el-empty>
            </div>
        </ul>
    </div>
</template>

<script setup>
import { useWebStore } from "@/store/webStore";
import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps({
    bookmarksList: {
        type: Array
    },
    isDeletable: {
        type: Boolean,
        default: false
    },
    isClear: {
        type: Boolean,
        default: false
    },
    filterType: {
        type: String,
        default: ''
    },
})


const store = useWebStore()


const mouseenter = (item) => {
    item.hover = true
}

const mouseleave = (item) => {
    item.hover = false
}

const updateFavorite = (url) => {
    store.updateFavorite(url)
}

const openBookmark = (item) => {
    Bookmark.openBrowserWindow(item.url)
}

const addBookmark = (url) => {
    store.addBookmark(url)
    ElMessage({
        type: 'success',
        message: '恢复书签成功',
    })
}

const removeBookmark = (url) => {
    ElMessageBox.confirm(
        props.isClear ? '是否彻底删除该书签？' : '是否将该书签移动到回收站？',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let message = '移除标签成功'
            if (props.isClear) {
                message = await store.clearRubbish(url)
            } else {
                store.removeBookmark(url)
            }
            ElMessage({
                type: 'success',
                message,
            })

        })
        .catch(() => {
            //用户取消操作
        })
}


</script>

<style lang='scss' scoped>
.bookmarks-list-wrap {
    height: 100%;

    .bookmarks-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;

        &.empty {
            height: 100%;
        }

        .search-empty {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        &.dark {
            .bookmarks-item {
                background-color: #282828;
                border-color: #303030;

                .bookmark-title {
                    color: #fff;
                }

                .bookmark-url {
                    color: #efefef;
                }
            }
        }

        .bookmarks-item {
            position: relative;
            width: 192px;
            height: 216px;
            margin: 20px;
            padding: 10px;
            border: 1px solid #efefef;
            border-radius: 8px;
            list-style: none;
            text-align: center;
            background-color: #fff;
            box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.20);
            backdrop-filter: blur(20px);

            &:hover {
                cursor: pointer;
            }

            .delete-wrap {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                width: 100%;
                height: calc(100% + 1px);
                z-index: 999;
                border-radius: 8px;
                background-color: rgba(0, 0, 0, 0.20);
                overflow: hidden;

                .icon-item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 100%;
                    width: 100%;

                    &:hover {
                        .el-icon {
                            color: #fff
                        }
                    }
                }
            }

            .bookmark-star {
                position: absolute;
                right: 8px;
                top: -11px;
                width: 16px;
                height: 16px;

                img {
                    width: inherit;
                    height: inherit;
                }
            }

            .bookmark-img {
                overflow: hidden;
                border: 1px solid #efefef;
            }

            .bookmark-title {
                height: 32px;
                font-size: 14px;
                font-family: SourceHanSansSC, SourceHanSansSC-Medium;
                font-weight: 500;
                color: #303030;
                line-height: 16px;
                vertical-align: middle;

            }

            .bookmark-url {
                opacity: 0.6;
                font-size: 12px;
                font-family: SourceHanSansSC, SourceHanSansSC-Normal;
                font-weight: normal;
                color: #000000;
                line-height: 16px;

            }
        }
    }
}
</style>